<template>
  <div id="apparatusManage">
    <el-card class="box-card" style="margin:15px">
      <el-form
        ref="basicForm"
        :inline="true"
        :model="basicData.model"
        class="demo-form-inline"
        size="small"
        label-width="100px"
      >
        <div style="margin-top:10px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="仪器名称:" prop="instrumentName">
                <el-input
                  @keyup.enter.native="getList(basicData)"
                  size="mini"
                  v-model="basicData.model.instrumentName"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="实验项目:" prop="experimentProject" class="projectIdList">
                <el-select size="mini" v-model="basicData.model.experimentProject">
                  <el-option
                    v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="仪器状态:" prop="instrumentStatus.key">
                <el-select
                  size="mini"
                  v-model="basicData.model.instrumentStatus.key"
                  placeholder="仪器状态"
                >
                  <el-option
                    v-for="(item, key, index) in dicts.INSTRUMENT_STATUS"
                    :key="index"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
      <div class="buttom" style="margin-top:7px">
        <el-button
          type="primary"
          size="small"
          style="width:100px"
          icon="el-icon-search"
          @click="onSubmit('query')"
        >查询</el-button>
        <el-button size="small" @click="onSubmit('reset')">重置</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:5px 15px;">
      <div style="margin-bottom:10px">
        <el-button size="small" type="primary" icon="el-icon-printer" @click="addShow = true">新增</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" type="index" width="55" />
        <el-table-column align="center" prop="instrumentName" label="仪器名称" />
        <el-table-column align="center" prop="instrumentType.data" label="仪器类型" />
        <el-table-column align="center" prop="experimentKeywords.data" label="实验项目" />
        <el-table-column align="center" prop="instrumentStatus.data" label="状态" />
        <el-table-column align="center" prop="startTime" label="启用日期">
          <template slot-scope="scope">
            <span>{{ scope.row.startTime?scope.row.startTime.substr(0, 10):'' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="otherValue" label="截断值" />
        <!-- <el-table-column align="center" prop="centerId" label="筛查中心ID" /> -->
        <el-table-column
          align="center"
          prop="departId.data.label"
          label="所属部门"
          show-overflow-tooltip
        />
        <el-table-column align="center" prop="memo" label="备注" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="clickEdit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="clickDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增 -->
    <el-dialog :visible.sync="addShow" width="55%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >新增仪器</span>

      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="addData"
        class="demo-form-inline"
        size="small"
        label-width="120px"
      >
        <div style="margin-top:10px;">
          <el-row>
            <el-col :span="24">
              <el-form-item label="名称:" prop="instrumentName">
                <el-input
                  style="width:300px"
                  size="mini"
                  v-model="addData.instrumentName"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="启用日期:" prop="startTime">
                <el-date-picker
                  style="width:300px"
                  size="mini"
                  :format="startTimeFormat"
                  @focus="addData.startTime = ''"
                  v-model="addData.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="类型:" prop="instrumentType.key">
                <el-select size="mini" v-model="addData.instrumentType.key" style="width:300px">
                  <el-option
                    v-for="item in dicts.INSTRUMENT_TYPE"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" id="shixianxiang" style="padding-left: 18px;">
              <el-col :span="8">
                <el-form-item label="所属区县:" prop="areaId.key" width="300px">
                  <el-select
                    size="mini"
                    v-model="addData.areaId.key"
                    placeholder="选择"
                    @change="clickOrgTree"
                  >
                    <el-option
                      v-for="(item, index) in orgTree"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      width="300px"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属医院:" prop="hospitalId.key">
                  <el-select
                    size="mini"
                    v-model="addData.hospitalId.key"
                    placeholder="选择"
                    @change="clickOrgTreeC"
                  >
                    <el-option
                      v-for="(item, index) in orgTreeC"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属部门:" prop="departId.key" id="ddd">
                  <el-select size="mini" v-model="addData.departId.key" placeholder="选择">
                    <el-option
                      v-for="(item, index) in orgTreeCs"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-form-item label="仪器厂商:" prop="instrumentFirm.key">
                <el-select size="mini" v-model="addData.instrumentFirm.key" style="width:300px">
                  <el-option
                    v-for="item in dicts.INSTRUMENT_FIRM"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态:" prop="instrumentStatus.key">
                <el-radio-group v-model="addData.instrumentStatus.key">
                  <el-radio
                    v-for="(item, key, index) in dicts.INSTRUMENT_STATUS"
                    :key="index"
                    :label="key"
                  >{{ item }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文件(映射)路径:" prop="fileUrl">
                <el-input
                  style="width:300px"
                  size="mini"
                  v-model="addData.fileUrl"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="真实盘符:" prop="realDrive">
                <el-input
                  size="mini"
                  style="width:300px"
                  v-model="addData.realDrive"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row id="more-row">
                <el-col id="shiyan" :span="24" class="more-col">
                  <el-form-item label="实验项目:" prop="projectIdList" class="projectIdList">
                    <el-checkbox-group v-model="addData.experimentProject">
                      <el-checkbox
                        v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                        :label="key"
                        name="type"
                      >{{ item }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" prop="memo">
                <el-input size="mini" v-model="addData.memo" type="textarea" style="width:600px" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="onSubmit('seave')"
        >保存</el-button>
      </span>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog :visible.sync="editShow" width="55%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >新增仪器</span>

      <el-form
        ref="basicForm"
        :rules="basicDataRules"
        :inline="true"
        :model="editData"
        class="demo-form-inline"
        size="small"
        label-width="120px"
      >
        <div style="margin-top:10px;">
          <el-row>
            <el-col :span="24">
              <el-form-item label="名称:" prop="instrumentName">
                <el-input
                  style="width:300px"
                  size="mini"
                  v-model="editData.instrumentName"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="启用日期:" prop="startTime">
                <el-date-picker
                  style="width:300px"
                  size="mini"
                  :format="startTimeFormat"
                  @focus="editData.startTime = ''"
                  v-model="editData.startTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="类型:" prop="instrumentType.key">
                <el-select size="mini" v-model="editData.instrumentType.key" style="width:300px">
                  <el-option
                    v-for="item in dicts.INSTRUMENT_TYPE"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" id="shixianxiang" style="padding-left:12px">
              <el-col :span="8">
                <el-form-item label="所属区县:" prop="areaId.key" width="300px">
                  <el-select
                    size="mini"
                    v-model="editData.areaId.key"
                    placeholder="选择"
                    @change="clickOrgTree"
                  >
                    <el-option
                      v-for="(item, index) in orgTree"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                      width="300px"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属医院:" prop="hospitalId.key">
                  <el-select
                    size="mini"
                    v-model="editData.hospitalId.key"
                    placeholder="选择"
                    @change="clickOrgTreeC"
                  >
                    <el-option
                      v-for="(item, index) in orgTreeC"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="所属部门:" prop="departId.key" id="ddd">
                  <el-select size="mini" v-model="editData.departId.key" placeholder="选择">
                    <el-option
                      v-for="(item, index) in orgTreeCs"
                      :key="index"
                      :label="item.label"
                      :value="item.id"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-form-item label="仪器厂商:" prop="instrumentFirm.key">
                <el-select size="mini" v-model="editData.instrumentFirm.key" style="width:300px">
                  <el-option
                    v-for="item in dicts.INSTRUMENT_FIRM"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="状态:" prop="instrumentStatus.key">
                <el-radio-group v-model="editData.instrumentStatus.key">
                  <el-radio
                    v-for="(item, key, index) in dicts.INSTRUMENT_STATUS"
                    :key="index"
                    :label="key"
                  >{{ item }}</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="文件(映射)路径:" prop="fileUrl">
                <el-input
                  style="width:300px"
                  size="mini"
                  v-model="editData.fileUrl"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="真实盘符:" prop="realDrive">
                <el-input
                  size="mini"
                  style="width:300px"
                  v-model="editData.realDrive"
                  placeholder="输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row id="more-row">
                <el-col id="shiyan" :span="24" class="more-col">
                  <el-form-item label="实验项目:" prop="projectIdList" class="projectIdList">
                    <el-checkbox-group v-model="editData.experimentProject">
                      <el-checkbox
                        v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                        :label="key"
                        name="type"
                      >{{ item }}</el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注:" prop="memo">
                <el-input size="mini" v-model="editData.memo" type="textarea" style="width:600px" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button
          size="small"
          type="primary"
          style="padding: 6px 19px;"
          @click="onSubmit('editSseave')"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { initDicts, downloadFile } from "@/utils/commons";
import orgApi from "@/api/Org.js";
import consumableManageApi from "@/api/ConsumableManage.js";

export default {
  data() {
    return {
      // 出生日期输入格式
      startTimeFormat: "MMdd",
      // 转菊花
      loading: false,
      // 新增弹窗
      addShow: false,
      // 修改弹窗
      editShow: false,
      // 数据
      tableData: [],
      // 总和
      total: 0,
      // 字典
      dicts: {
        INSTRUMENT_STATUS: {}, //仪器状态
        INSTRUMENT_TYPE: {}, //仪器类型
        INSTRUMENT_FIRM: {}, //仪器厂家
        EXPERIMENT_CODE: {} //实验项目
      },
      basicData: {
        current: 1,
        map: {},
        model: {
          areaId: {
            key: ""
          },
          departId: {
            key: ""
          },
          experimentKeywords: "",
          hospitalId: {
            key: ""
          },
          instrumentName: "",
          instrumentStatus: {
            data: "",
            key: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 新增项目
      addData: {
        // 所属区县
        areaId: { key: "" },
        // 所属医院
        hospitalId: { key: "" },
        // 所属部门
        departId: { key: "" },
        centerId: "",
        experimentKeywords: {
          data: "",
          key: ""
        },
        experimentProject: [],
        fileUrl: "",
        instrumentFirm: {
          data: "",
          key: ""
        },
        instrumentName: "",
        instrumentStatus: {
          data: "",
          key: ""
        },
        instrumentType: {
          data: "",
          key: ""
        },
        memo: "",
        otherValue: "",
        realDrive: "",
        startTime: ""
      },
      // 修改项目
      editData: {
        // 所属区县
        areaId: { key: "" },
        // 所属医院
        hospitalId: { key: "" },
        // 所属部门
        departId: { key: "" },
        centerId: "",
        experimentKeywords: {
          data: "",
          key: ""
        },
        experimentProject: [],
        fileUrl: "",
        instrumentFirm: {
          data: "",
          key: ""
        },
        instrumentName: "",
        instrumentStatus: {
          data: "",
          key: ""
        },
        instrumentType: {
          data: "",
          key: ""
        },
        memo: "",
        otherValue: "",
        realDrive: "",
        startTime: ""
      },
      basicDataRules: {
        instrumentName: [{ required: true, message: "   ", trigger: "change" }],
        startTime: [{ required: true, message: "   ", trigger: "change" }],
        "instrumentType.key": [
          { required: true, message: "  ", trigger: "change" }
        ],
        "instrumentFirm.key": [
          { required: true, message: "   ", trigger: "change" }
        ]
      },
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: []
    };
  },
  mounted() {
    initDicts(
      [
        "INSTRUMENT_STATUS",
        "EXPERIMENT_CODE",
        "INSTRUMENT_TYPE",
        "INSTRUMENT_FIRM"
      ],
      this.dicts
    );
    // 获取基础查询
    this.initOrgTree();
    // 获取表格数据
    this.getList(this.basicData);
  },
  methods: {
    // 启用日期输入
    changestartTime(v) {
      this.addData.startTime = v;
      if (this.addData.startTime) {
        this.startTimeFormat = "yyyy-MM-dd";
      } else {
        this.startTimeFormat = "MMdd";
      }
    },
    // 修改
    clickEdit(v) {
      this.startTimeFormat = "yyyy-MM-dd";
      this.editData = JSON.parse(JSON.stringify(v));
      this.editShow = true;
      this.orgTree.filter(res => {
        if (res.id == this.editData.areaId.key) {
          this.orgTreeC = res.children;
        }
      });
      this.orgTreeC.filter(res => {
        if (res.id == this.editData.hospitalId.key) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 删除
    clickDelete(v) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        consumableManageApi.apparatusManage
          .delete({ "ids[]": v.id })
          .then(res => {
            if (res.status == "200") {
              this.getList(this.basicData);
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            } else {
              this.$message.error(res.statusText);
            }
          });
      });
    },
    // 获取table
    getList(data) {
      this.loading = true;
      consumableManageApi.apparatusManage.page(data).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;
        this.loading = false;
      });
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.addData.hospitalId = {
        key: ""
      };
      this.addData.departId = {
        key: ""
      };
      this.editData.hospitalId = {
        key: ""
      };
      this.editData.departId = {
        key: ""
      };
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.addData.departId = {
        key: ""
      };
      this.editData.departId = {
        key: ""
      };
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });
    },
    // 基础信息按钮点击事件
    onSubmit(type) {
      if (type == "query") {
        this.getList(this.basicData);
      } else if (type == "reset") {
        // 如果为true则清空表单
        this.$refs["basicForm"].resetFields();
      } else if (type == "seave") {
        this.$refs["basicForm"].validate(valid => {
          if (valid) {
            // 设置选中值
            consumableManageApi.apparatusManage.add(this.addData).then(res => {
              if (res.status == "200") {
                this.getList(this.basicData);
                this.addShow = false;
                this.$message({
                  type: "success",
                  message: "新增成功!"
                });
              } else {
                this.$message.error(res.statusText);
              }
            });
          } else {
            return false;
          }
        });
      } else if (type == "editSseave") {
        this.$refs["basicForm"].validate(valid => {
          if (valid) {
            // 设置选中值
            consumableManageApi.apparatusManage
              .edit(this.editData)
              .then(res => {
                if (res.status == "200") {
                  this.getList(this.basicData);
                  this.editShow = false;
                  this.$message({
                    type: "success",
                    message: "修改成功!"
                  });
                } else {
                  this.$message.error(res.statusText);
                }
              });
          } else {
            return false;
          }
        });
      }
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  },
  watch: {
    "addData.startTime": function(v) {
      console.log(11);

      this.changestartTime(v);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#apparatusManage {
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-input,
  .el-textarea {
    width: 100% !important;
  }
  #shixianxiang {
    .el-input {
      width: 90% !important;
    }
    #ddd {
      .el-input {
        width: 100% !important;
      }
    }
  }
  .mores {
    .flex;
    justify-content: flex-start;
    width: 100%;
    background: #188ff233;
    height: 30px;
    padding: 5px 8px;
    .more-title {
      font-family: SourceHanSansSC;
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
      font-size: 14px;
      font-weight: 500;
      color: #000;
    }
  }

  #shiyan {
    .projectIdList {
      width: 100%;
      .el-form-item__content {
        width: 80%;
      }
    }
  }
  .more-form {
    .more-row {
      .more-col {
        .remark {
          width: 100%;
          .el-form-item__content {
            width: 90%;
          }
        }
      }
    }
  }
  .buttom {
    width: 100%;
    .flex;
  }
  .el-dialog__header {
    border-bottom: 1px solid #e0e0e0;
  }
  .print-form {
    max-height: 500px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    flex-flow: wrap;
    .print-item {
      width: 50%;
      .flex;
      justify-content: flex-start;
      color: #222222;
      font-size: 15px;
      margin-top: 10px;
      .title {
        font-weight: bold;
        flex: 0.4;
      }
      .value {
        flex: 0.6;
        font-weight: bold;
        overflow-wrap: anywhere;
      }
    }
  }
  .el-dialog__footer {
    .flex;
  }
  .el-dialog__header {
    background: #2669f3;
  }
}
</style>
